<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one{
            color: red;
        }
    </style>
</head>

<body>
    <div id="app"></div>

    <div id="b"></div>
    <div id="cc"></div>
    <div id="bb"></div>
    <div class="b"></div>

    <!-- <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> -->

    <script src="./1.js"></script>
    <script src="./2.js"></script>
    <script src="./3.js"></script>

    <script type="text/babel">
        let dom = <div><h1>111</h1></div>

        let flag = false

        let arr = ['11', '22', '33', '44', '55']

        function fun(s) {
            return s.split('').reverse().join('')
        }

        let srt;
        if (flag == true) {
            srt = <h1>正确</h1>
        } else {
            srt = <h1>错误</h1>
        }

        let str = '222222'
        let c = '33333'
        let dom1 = (
            <div>
                <h1>{str}</h1>
                <h1>{str}</h1>
                <h1>{1 + 1}</h1>
                <h1>{1 < 3 ? "大" : '小'}</h1>
                <h1>{fun(str)}</h1>
                <h1>{str} {c}</h1>
                <h1 style={{color:'green',background:'red'}}>哈哈哈</h1>
                <h1 class='one'>呵呵呵</h1>
            </div>
        );

        let csc = <ul>
            {
                arr.map(function (v, i) {
                    return <li key={i}>{v}</li>
                })
            }
        </ul>

        let cvc = <div>
            {flag == true ? <h1>正确</h1> : <h1>错误</h1>}
            {srt}
        </div>


        ReactDOM.render(
            cvc,
            document.getElementById('bb')
        )

        ReactDOM.render(
            dom1,
            document.getElementById('b')
        )

        ReactDOM.render(
            csc,
            document.getElementById('cc')
        )

        ReactDOM.render(
            dom,
            document.getElementById('app')
        )
    </script>


</body>

</html>